<template>
  <div class="icons-container">
         <div style="padding-bottom:10px">
                <p> 1.闭包</p>
                <p style="padding-left:10px">  函数外能访问函数内部的变量
                        局部变量无法共享和长久保存,而全局变量可能造成变量污染  
                        我们希望有种机制可以长久保存变量又不造成全局污染
                </p>
                <p style="padding-left:10px">   闭包的2个特性 
                      1.延长变量的生命周期(例如防抖和节流)   2.创建私有作用域(vue中的data为啥是个函数)
                </p>
                 <p style="padding-left:10px">   闭包的2个特性 
                      闭包的使用场景  1.函数防抖 2.函数节流 3.函数科里化 4.封装功能的时候(私有属性和方法) 5.jq也是一个大闭包 
                </p>

                 <p style="padding-left:10px">   
                     现代浏览器对闭包都做了优化 没啥影响 (数据量在百万以下)  IE8确实有影响 早期IE有bug

                    闭包造成内存泄漏这个看法不一

                     闭包并不会引起内存泄漏，只是由于IE9之前的版本对JScript对象和COM对象使用不同的垃圾收集，从而导致内存无法进行回收，
                      这是IE的问题，所以闭包和内存泄漏没半毛钱关系

                    所以闭包不会导致内存泄漏，而是旧版本的浏览器的垃圾回收机制存在问题 通过一些处理就可以避免内存无法回收的问题 
                </p>
                
                 <p style="padding-left:10px">  闭包中的变量存在的地方是堆中  不在栈中
                </p>
         </div>

        <div style="padding-bottom:10px">
                 2.this的执向问题     1.指向全局对象window   2.指向所属对象  3 指向对象实例   4.this指向arguments  <br />
        
                  arguments  参数集合 类似数组  call apply bind 还可以改变this的 执向  <br />

                  由于this的学习的成本比较高 所以reackhoos和vue3.0都抛弃了this 
                   
         </div>

          <div style="padding-bottom:10px">
                  <p>3. call apply  bind</p>
                  <p style="padding-left:10px">  bind() 没有传入自定义的this的时候 null 或者undefined   继续指向原来的this <br />

                     this 一旦被bind后 就不会在被call和apply修改   <br />

                     箭头函数 本身不具备this  在函数创建时外面作用空间的this  <br />

                     箭头函数中的this是不能被 call aply  bind 改变this指向的  <br />

                     call 两个参数 第一个是this指向 第二个是参数列表 参数形式是按逗号的形式区别开 参数1,参数2  <br />

                    apply 两个参数 第一个是this指向 第二个是参数列表 参数形式数组的形式 [ 参数1,参数2.....]  <br />

                     bind不会立即指向返回一个函数调这个函数执行 fun.bind(obj,'张三'，''李四)()传参的方式和call相同  <br />

                 </p>
           </div>

            <div style="padding-bottom:10px">
                   4. 箭头函数没有this  在函数创建时外面作用域的this   <br />
                    箭头函数中的this是不会被call 等改变执向的  <br />
                    被bind改变的this  不会再被call apply再次改变  <br />
                  
                    因为箭头函数没有[[Constructor]]内部方法槽。  <br />
                    箭头函数的设计之初就是为了设计一种更为简短的函数并且不绑定this。  <br />
                    所以箭头函数不为参数super、this或者new.target定义本地绑定。  <br />
                    箭头函数中的这些属性由父级上下文决定。对于这样的函数特性， <br />
                    设计者认为没有必要委托给能够[[Construct]]的目标函数。  <br />
                    所以函数对象没有[[Construct]]。由js中函数对象的原型可知，没有构造函数， <br />
                    也就没有构造原型的需求，所以箭头函数也不存在prototype属性。 <br />
            </div>

            <div style="padding-bottom:10px">
                      5.new关键字 1.创建一个空 对象  2.链接到原型 3.绑定this指向 执行构造函数  4.确包返回一个对象
            </div>

          <div style="padding-bottom:10px">
                      6.原型和原型链 (继承)
                        原型链就是以一个对象为基准  以__proto__ 为连接的这条链条一直到 Object.prototype 为止 这条链我们叫原型链
                        原型链的顶端就是null

                        prototype:原型(显示原型)  __proto__(隐示原型)   <br />

                         Function  Obgect 即使函数也是对象   Function.prototype===Function.__proto__ 这是底层给我们规定好的
            </div>

            <div style="padding-bottom:10px">
                      7.继承
                            构造函数继承  缺点 原型链上的方法和属性没办法继承   <br />
     
                            原型链继承  实例化原型对象的属性是引用类型的时候 会出现浅拷贝及数据污染的问题   <br />

                            组合继承 会调用2次父类的构造函数   <br />

                            寄生组合继承
            </div>

           <div style="padding-bottom:10px">
                      8. 类数组转成数组的方法  Array.from()  Array.prototype.slice.call() Array.prototype.splice.call(arrayLike, 0); <br />
                 Array.prototype.concat.apply([], arrayLike)   扩展运算符  <br />
                  
                 类型判断   Object.prototype.toString.call(true)   typeof instanceof  constructor  <br />

                typeof  判断string  number boolean 比较准     数组和对象都是 object 函数就是function  <br />

                  instanceof 是通过原型链判断的，A instanceof B, 在A的原型链中层层查找，是否有原型等于B.prototype，     <br />     
                   如果一直找到A的原型链的顶端null,仍然不等于B.prototype，那么返回false，否则返回true.   <br />
             
            </div>

            <div style="padding-bottom:10px">
                      9. 类数组转成数组的方法  Array.from()  Array.prototype.slice.call() Array.prototype.splice.call(arrayLike, 0); <br />
                 Array.prototype.concat.apply([], arrayLike)   扩展运算符  <br />
                  
                 类型判断   Object.prototype.toString.call(true)   typeof instanceof  constructor  <br />

                typeof  判断string  number boolean 比较准     数组和对象都是 object 函数就是function  <br />

                  instanceof 是通过原型链判断的，A instanceof B, 在A的原型链中层层查找，是否有原型等于B.prototype，     <br />     
                   如果一直找到A的原型链的顶端null,仍然不等于B.prototype，那么返回false，否则返回true.   <br />
             
            </div>

            <div style="padding-bottom:10px">

                      10.合并对象  1.object.assign()  2.扩展运算符       <br />     

                      浅拷贝    1.object.assign()  2.扩展运算符  3.结构赋值    <br />     

                      深拷贝   JSON.parse(JSON.string())  递归      <br />     

                    浅拷贝拷贝的是地址   深拷贝 是新建一块空间  把原来的数据的属性一个一个拿过去    <br />     

                    解构赋值 对于一维数组和一维对象是深拷贝  对于多维的就是浅拷贝    <br />     

                    JSON.parse(JSON.string())  问题  对于js的关键字和缺失  循环引用的问题  3.精度丢失的问题    <br />     
            </div>

            <div style="padding-bottom:10px">
                    11.数组的去重
          
                     es6的数组去重 1.new Set()   2.Array.form()
  
                     Array.form()不仅可以去重还可以把 伪 数组变成真正的数组

            </div>

             <div style="padding-bottom:10px">
                    12.class 本质也是function class是function的语法糖

            </div>

            <div style="padding-bottom:10px">
                    13. 宏任务 1.DOM操作 2.用户交互(事件) 3.网络任务(ajax) 4.history traversal 5.定时器

                      微任务 Promsie.then   process.nextTick（node,js） MutationObserver（H5里监听DOM节点变化）

            </div>

             <div style="padding-bottom:10px">
                    14.  promise的构造函数式同步执行的  promise.then()是异步执行的
            </div>

              <div style="padding-bottom:10px">
                    15.   hasOwnProperty 可以判断一个属性是否在对象中
            </div>

              <div style="padding-bottom:10px">
                    16.   argments和resst的区别  
                       argments 最常用于判断传入参数的个数 它是类数组
                       resst 参数只包括那些没有给出名称的参数 它是数组 可以直接使用数组的方法
            </div>

            <div style="padding-bottom:10px">
                    17.   node是 单线程和进程吗 
                      而node.js采用单线程异步非阻塞模式，也就是说每一个计算独占cpu，遇到I/O请求不阻塞后面的计算，
                      当I/O完成后，以事件的方式通知，继续执行计算。
            </div>

              <div style="padding-bottom:10px">
                    18.  forEach 1.没有返回值 2.不能break  return false   3.遍历的值是value 
                         为啥forEach map不能跳出循环  因为他是迭代器
                          map有返回值   不能break  return false
                          怎么跳出循环 我们可以抛出一个错误
            </div>

             <div style="padding-bottom:10px">
                    19.  for > for-of > forEach > map > for-in    <br />    
                      for in 的循环性能循环很差。性能差的原因是因为：for in 会迭代对象原型链上一切 可以枚举的属性。
            </div>
              <div style="padding-bottom:10px">
                    20. export、import可以有多个，export default仅有一个
            </div>
             <div style="padding-bottom:10px">
                    21.对象字面量创建对象与 Object.create(null)创建对象有什么区别
                         Object.create(null)创建的对象是非常纯净的，没有任何其它元素，而另一个var创建的对象是带有_proto_的，
                     下面有一些方法与属性，这便是js的原型链继承，它继承了Object的方法和属性。这便是区别。
            </div>

             <div style="padding-bottom:10px">
                    22.  问我们项目在安全上做的事情   前端加密   后端不信任前端的数据要进行校验  <br />   
                         黑客也考虑性价比    如果他的代价还没收入多 他为啥要搞破坏  <br />   
                         白名单 和公司自己有自己的防火墙和不定期的攻防演练   <br />   
            </div>

              <div style="padding-bottom:10px">
                    23.  跨域问题的解决方法    <br />  
                        1.前端代理      <br />   
                        2.后端解决   <br />   
                        3.node作中间件代理下 node(正向代理)   <br />   
                        4.用插件解决   <br />   
                        5.把浏览器设置成跨域的   <br />   
                        6.ng的反向代理   <br />   
            </div>

              <div style="padding-bottom:10px">
                    24. script 不存在跨域的问题 jsonp(只能有get的请求  不安全 有缓存 大小限制)的解决跨域原理 动态的创建一个script标签      <br />  
            </div>

             <div style="padding-bottom:10px">
                    25. opptions是试探性请求 看服务器和客户端可是通的  
            </div>
            <div style="padding-bottom:10px">
                    26. 为啥字符串可以掉方法  包装对象 
            </div>
            <div style="padding-bottom:10px">
                    27.浅冻结
                        如上所说，Object.freeze()可以冻结简单的对象，如果对象里还有对象，那么冻结还有效么？
                        深冻结  递归
            </div>
             <div style="padding-bottom:10px">
                    28.iframe页面如何和我们的自己写的页面通信
                       地址栏传参 或者所需的数据存入缓存
            </div>

             <div style="padding-bottom:10px">
                    29.  0.1和0.2转换成二进制的时候会发生无限循环,然后进行对阶运算,
                          js 引擎对2进制进行截断 所以造成精度的丢失
            </div>
            <div style="padding-bottom:10px">
                    30.虚拟dom 的本质是js对象 可以很好的跨平台(vue 是在2.0引入的  react用的比vue早)
            </div>
             <div style="padding-bottom:10px">
                    31.vue的两大核心 组件化和相应式
            </div>
              
            <div style="padding-bottom:10px;padding-left:0px">
                    32.  v-if和v-show的相同点和不同点    <br />  
                        不同点:前者的本质是三元运算符 后者算是一个对象      <br />   
                        不同点:前者的true false转换会重新触发四个生命周期 后者不会   <br />   
                        不同点:前者的显示隐藏式直接把DOM直接干掉 后者是通过css属性来实现   <br />   
                        相同点: 两者作用的元素不可以标记为静态元素  <br />    
            </div>

                 
            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 33.加载渲染过程</p>
                     <p style="padding-left:15px">父 beforeCreate -> 父 created ->父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子mounted -> 父mounted</p>
            </div>

            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 34.子组件更新过程</p>
                     <p style="padding-left:15px">父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated </p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 35.父组件更新过程</p>
                     <p style="padding-left:15px">  父beforeUpdate -> 父 updated </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                     <p> 36.销毁过程</p>
                     <p style="padding-left:15px">父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                     <p> 37. Vuex里面的gettes相当于vue里面的计算属性(computed)</p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 38.  混入组件的生命周期先于组件的生命周期执行 </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                     <p> 39.state数据源仓库  matation(用来提交数据 修改数据)   actions(做异步操作的 最终提交到matutaion) </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                     <p> 40.vuex 更改state 是 dispatch 给 action，action 再 commit 给 mutation，这样实现了单向数据改动 区别普通双向绑定 </p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 41.可以通过mutation直接修改数据(commit) 也可以先提交到action 再到mutation </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                     <p> 42. vuex的核心 是吧state放到data里面实现数据的相应式</p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 43.当前的路由current必须是相应式的数据  vue.utils.definetaive()</p>
            </div>
              <div style="padding-bottom:10px;padding-left:0px">
                     <p> 44.对称加密 加密和解密是同一把秘钥  算法公开 安全性取决于秘钥的大小 越大效率越低
                          非对称加密  安全性高  但是加密复杂 效率低 耗时长 
                     </p>
            </div>

            <div style="padding-bottom:10px;padding-left:0px">
                     <p> 45.vue模板编译的大概流程，总结一下 </p>
                     <p style="padding-left:15px"> 转化成ast </p>
                     <p style="padding-left:15px"> 生成render函数</p>
                     <p style="padding-left:15px"> 生成虚拟dom </p>
                     <p style="padding-left:15px"> 生成真实dom </p>
            </div>

              <div style="padding-bottom:10px;padding-left:0px">
                     <p> 46.Vue2.0中父子组件的六种通信方式
                     </p>
                       <p style="padding-left:15px"> 
                         一、Props + $emit    
                      </p>
                        <p style="padding-left:15px"> 
                         二、回调函数（callBack）   
                      </p>
                        <p style="padding-left:15px"> 
                         三、$parent + $children 
                      </p>
                        <p style="padding-left:15px"> 
                         四、provide + inject  
                      </p>
                        <p style="padding-left:15px"> 
                           五、$attrs + $listeners  
                      </p>
                        <p style="padding-left:15px"> 
                           六、ref 获取组件实例 
                      </p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                       <p> 47.Vue2.0中兄弟组件
                       </p>
                       <p style="padding-left:15px"> 
                         一、vuex 
                      </p>
                        <p style="padding-left:15px"> 
                         二、eventBus   
                      </p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                       <p> 48.Vue2.0 祖代组件的通信
                       </p>
                       <p style="padding-left:15px"> 
                         一、vuex 
                      </p>
                      <p style="padding-left:15px"> 
                         二、provide + inject    
                      </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                       <p> 48.Vue3.0 组件的通信方式
                       </p>
                       <p style="padding-left:15px"> 
                         一、vuex 或者pina
                      </p>
                      <p style="padding-left:15px"> 
                         二、provide + inject    
                      </p>
                      <p style="padding-left:15px"> 
                          vue3.0把好多的vue2.0的方法全部废弃了   
                      </p>
            </div>
            <div style="padding-bottom:10px;padding-left:0px">
                       <p> 49.两种路由模式
                       </p>
                       <p style="padding-left:15px"> 
                        使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号，有一点点丑。这是最安全的模式，因为他兼容所有的浏览器和服务器
                          由于hash值变化不会导致游览器向服务器发出请求， hash  hashChange
                      </p>
                      <p style="padding-left:15px"> 
                         美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本 感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前    进、后退等按钮进行的操作。   
                           history模式改变url的方式会导致游览器向服务器发送请求  history 模式是pushState()
                      </p>
            </div>  
             <div style="padding-bottom:10px;padding-left:0px">
                       <p> 50. Nginx跨域配置  server下面配置
                       </p>
            </div>  
            <div style="padding-bottom:10px;padding-left:0px">
                       <p> 51.JSON 本身是不管函数的因为　 JSON　本身就没有函数的类型 
                              
                       </p>
                       <p style="padding-left:15px"> 
                          JSON.parse( JSON.stringify( dataOne ) ) 的时候 undefined和函数会丢失
                      </p>
            </div>   
              <div style="padding-bottom:10px;padding-left:0px">
                       <p> 52. vue中的watch监听，除了监听data中的数据，还可以监听 props 、$route 、$emit 、computed
                       </p>
            </div>
             <div style="padding-bottom:10px;padding-left:0px">
                       <p> 53. vue中的watch 与 computed 的区别
                       </p>
                        <p style="padding-left:15px"> 
                          本质上来说  他们是没与区别的 都是Watcher
                      </p>
                        <p style="padding-left:15px"> 
                          watch是异步的 执行的是一些数据量大些的操作
                      </p>
                       <p style="padding-left:15px"> 
                          computed 是同步的  懒执行 通过dirty变量来控制的
                      </p>
            </div>   
           <div style="padding-bottom:10px;padding-left:0px">
                       <p> 54. 2.0中 多个功能的组合只能用Mixin
                       </p>
                        <p style="padding-left:15px"> 
                           Mixin 也会遇到让人苦恼的问题
                           命名冲突问题
                           不清楚暴露出来的变量的作用
                           逻辑重用到其他 component 经常遇到问题 

                      </p>
                       
            </div>          

       


             


  
  </div>
</template>

<script>
import clipboard from '@/utils/clipboard'
import svgIcons from './svg-icons'
import elementIcons from './element-icons'

export default {
  name: 'Icons',
  data() {
    return {
       
    }
  },
  methods: {
   
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  padding-bottom:50px ;
}
</style>
